<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!-- <script src="js/vue.js"></script> -->
    <script src="../../js/vue.js"></script>
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">


    <script src="../../element-ui/lib/index.js"></script>
    <script src="../../js/axios-0.18.0.js"></script>


</head>
<style>

</style>

<body>

<div id="app">

    <el-input v-model="searchText" placeholder="请输入搜索内容" style="width: 200px"
              @keyup.enter="handleSearch"></el-input>
    <el-select v-model="searchType" placeholder="选择搜索类型" style="width: 150px">
        <el-option label="按账号搜索" value="username"></el-option>
        <el-option label="按姓名" value="name"></el-option>
    </el-select>
    <el-button type="primary" @click="handleSearch">搜索</el-button>

    <el-button
            style="background-color: red;color: white;float:right;margin-right: 50px"
            type="primary"
            @click="batchDelete()"
    >
        批量删除
    </el-button>

    <el-table style="padding: 20px"
              :data="tableData"
              stripe
              @selection-change="handleSelectionChange"

    >

        <el-table-column type="selection" width="55"></el-table-column>
        <!--          图书分类名称）-->
        <el-table-column
                prop="username"
                label="账号"
        >
        </el-table-column>


        <el-table-column
                prop="name"
                label="姓名"
        >
        </el-table-column>

        <el-table-column
                prop="email"
                label="邮箱"
        >
        </el-table-column>

        <el-table-column
                prop="phone"
                label="手机号"
        >
        </el-table-column>


                <el-table-column label="账号状态">
                    <template slot-scope="scope">
                        <!-- 根据 status 的值动态渲染不同的内容 -->
                        <span v-if="scope.row.status === 1">正常</span>
                        <span v-else>锁定</span>
                    </template>
                </el-table-column>
<!--        <el-table-column label="账号状态(打开为锁定)">-->
<!--            <template slot-scope="scope">-->
<!--                <el-switch v-model="scope.row.isStatusTrue"-->
<!--                           @change="handleSwitchChange(scope.row)"></el-switch>-->
<!--            </template>-->
<!--        </el-table-column>-->

        <el-table-column
                prop="lendNum"
                label="可借阅天数"
        >
        </el-table-column>

        <el-table-column
                prop="maxNum"
                label="最大借阅数"
        >
        </el-table-column>


        <el-table-column
                label="操作"
                width="160"
                align="center"
        >
            <template slot-scope="scope">
                <el-button
                        type="text"
                        size="small"
                        class="blueBug"
                        @click="editHandle(scope.row)"
                >
                    修改
                </el-button>
                <el-button
                        type="text"
                        size="small"
                        class="delBut non"
                        @click="deleteHandle(scope.row)"
                >
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog :visible.sync="editDialogVisible" title="修改用户信息">
        <el-form :model="editForm" ref="editForm" label-width="80px">
            <!-- 表单项 -->
            <el-form-item label="账号">
                <el-input v-model="editForm.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="editForm.name"></el-input>
            </el-form-item>

            <el-form-item label="密码">
                <el-input v-model="editForm.password"></el-input>
            </el-form-item>

            <el-form-item label="邮箱">
                <el-input v-model="editForm.email"></el-input>
            </el-form-item>

            <el-form-item label="电话">
                <el-input v-model="editForm.phone"></el-input>
            </el-form-item>

            <el-form-item label="账号状态">
                <el-input v-model="editForm.status" @focus="messageLock"></el-input>
            </el-form-item>
<!--            <span style="color: red;border: solid 1px;float: right">1表示账号可正常登录，0锁定无法登录</span>-->
<!--                    <el-table-column label="账号状态">-->
<!--                        <template slot-scope="scope">-->
<!--                            &lt;!&ndash; 根据 status 的值动态渲染不同的内容 &ndash;&gt;-->
<!--                            <span v-if="scope.row.status === 1">正常</span>-->
<!--                            <span v-else>锁定</span>-->
<!--                        </template>-->
<!--                    </el-table-column>-->


            <el-form-item label="可借阅天数">
                <el-input v-model="editForm.lendNum"></el-input>
            </el-form-item>
            <el-form-item label="最大借阅数">
                <el-input v-model="editForm.maxNum"></el-input>
            </el-form-item>


        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!--    class="pageList"-->
    <el-pagination

            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
            @size-change="handleSizeChange"
            :current-page.sync="page"
            @current-change="handleCurrentChange"
    ></el-pagination>


</div>

</body>

<script>

    let myVue = new Vue({
        el: '#app',
        data() {
            return {
                input: '',
                counts: 0,
                page: 1,
                pageSize: 10,
                tableData: [],
                selectedRows: [],
                searchText: '', // 搜索文本
                searchType: 'username', // 默认搜索类型为用户名
                editDialogVisible: false,
                editForm: {}

            }
        },
        computed: {},
        created() {
            this.init()
            //this.user = JSON.parse(localStorage.getItem('userInfo')).username
        },
        mounted() {
        },
        methods: {
            handleSearch() {
                this.page = 1; // 重置页码为1
                this.init(); // 执行搜索操作
            },
            async init() {
                // axios.get("/user/page?page=" + this.page + "&pageSize=" + this.pageSize + "&name=" + this.input).then(res => {
                //     this.tableData = res.data.data.records;
                //     this.counts = res.data.data.total;
                // })

                let params = {
                    page: this.page,
                    pageSize: this.pageSize
                };

                if (this.searchText) {
                    if (this.searchType === 'username') {
                        params.username = this.searchText;
                    } else if (this.searchType === 'name') {
                        params.name = this.searchText;
                    }
                }
                //按照分类搜索

                axios.get("/user/page", {params})
                    .then(res => {
                        this.tableData = res.data.data.records;
                        this.counts = res.data.data.total;

                    })
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.init()
            },
            handleCurrentChange(val) {
                this.page = val
                this.init()
            },
            handleQuery() {
                this.page = 1;
                this.init();
            },

            // 处理点击删除按钮
            deleteHandle(obj) {
                // console.log(obj);

                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                    'type': 'warning'
                }).then(() => {

                    axios.delete("/user?aids=" + obj.aid).then(res => {
                        if (res.data.code === 1) {
                            this.$message.success('删除成功！')
                            this.handleQuery()
                        } else {
                            this.$message.error(res.data.msg || '操作失败')
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                })
                // console.log('删除');
            },

            batchDelete() {
                if (this.selectedRows.length === 0) {
                    this.$message.warning('请选择要删除的数据！');
                    return;
                }

                this.$confirm('此操作将永久删除所选分类, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 执行批量删除操作
                    const aids = this.selectedRows.map(row => row.aid);
                    // console.log(tids.toString())
                    axios.delete("/user?aids=" + aids.toString()).then(res => {
                        if (res.data.code === 1) {
                            this.$message.success('批量删除成功！');
                            this.handleQuery();
                        } else {
                            this.$message.error(res.data.msg || '操作失败');
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err);
                    });
                });
            },
// 监听复选框选择事件，更新选中的数据
            handleSelectionChange(val) {
                // this.selectedRows = this.selectedRows.join(",") ;
                this.selectedRows = val || [];
                console.log("val=" + val);
            },
            editHandle(row) {
                // 显示修改对话框
                this.editDialogVisible = true;
                // 设置表单数据
                this.editForm = row;
                this.editForm.password = "直接设置，不回显";
            },
            // 处理修改提交
            handleEditSubmit() {
                // 提交修改操作
                // 隐藏修改对话框
                axios.post("/user/edit", this.editForm)
                    .then(res => {
                        if (res.data.code === 1) {
                            this.$message.success('修改成功');
                            // this.resetAddBookForm(); // 清空表单内容
                            this.editForm = {};
                            this.handleQuery();

                        } else {
                            this.$message.error(res.data.msg || '添加图书失败！');
                        }
                    })
                // console.log(this.editForm);

                this.editDialogVisible = false;

            },
            messageLock() {
                this.$message({
                    message: '1表示账号可正常登录，0锁定无法登录,请谨慎修改。',
                    type: 'info'
                });
            }
        }
    })


</script>


</html>